<template>
	<ma-body>
		<!-- <ma-header slot="header"></ma-header> -->
		<ma-refresh slot="content" :refresh="false">
			<div class="big-box">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="title-box">
					<span class="title-line"></span>
					<div class="input-text">
						<span class="jiu-font30-fff">个人中心</span>
						<span class="jiu-font32-555">PERSONAL CENTER</span>
					</div>
				</div>
				
				<div class="person-list" style="padding: 2.67vw;padding-right: 5.33vw;padding-left: 6.4vw;" @tap="onHeader">
					<div class="center">
						<span class="jiu-font28-aaa left">头像</span>
						<image :src="headerImg" mode="aspectFill" class="header-img"></image>
					</div>
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="icon-img"></image>
					<!-- <image src="../../../static/img/tabbar/activity1.png" mode="aspectFill" class="icon-img"></image> -->
				</div>
				
				<div class="person-list" @tap="toResetName">
					<div class="center">
						<span class="jiu-font28-aaa left">昵称</span>
						<input type="text" placeholder="九歌灵藏" placeholder-class="jiu-font28-ffc" style="color: #FFCE80;width: 100%;" disabled="true" @blur="editName" v-model="nickname" />
						<!-- <image src="../../../static/img/swiper.jpg" mode="aspectFill" class="header-img"></image> -->
					</div>
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="icon-img"></image>
					<!-- <image src="../../../static/img/tabbar/activity1.png" mode="aspectFill" class="icon-img"></image> -->
				</div>
				
				<div class="person-list">
					<div class="center">
						<span class="jiu-font28-aaa left">用户ID</span>
						<input :placeholder="String(user.info.uuid)" disabled="true" placeholder-class="jiu-font28-aaa" placeholder-style="font-weight: 300;" style="color: #555555;" />
					</div>
					<image src="../../../static/img/fuzhi.png" mode="aspectFill" class="icon-img" @tap="fuzhi(user.info.uuid)"></image>
				</div>
				
				<div class="person-list">
					<div class="center">
						<span class="jiu-font28-aaa left">手机号码</span>
						<input :placeholder="phoneNumber" placeholder-class="jiu-font28-ffc" disabled="true" />
						<!-- <image src="../../../static/img/swiper.jpg" mode="aspectFill" class="header-img"></image> -->
					</div>
					<!-- <image src="../../../static/img/tabbar/activity1.png" mode="aspectFill" class="icon-img"></image> -->
				</div> 
				
				<div class="person-list" @tap="toReset">
					<div class="center">
						<span class="jiu-font28-aaa left">密码</span>
						<input type="text" placeholder="修改密码" placeholder-class="jiu-font28-aaa" placeholder-style="font-weight: 300;" style="color: #555555;" />
					</div>
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="icon-img"></image>
				</div>
				
				<div class="person-list" @tap="toRealName">
					<div class="center">
						<span class="jiu-font28-aaa left">实名认证</span>
						<span class="jiu-font28-ffc" style="color: #FF9E3E;">{{ user.myInfo.user.isReal == 0 ? '未认证' : '已认证' }}</span>
						<!-- <input type="text" placeholder="修改密码" placeholder-class="jiu-font28-aaa" placeholder-style="font-weight: 300;" /> -->
					</div>
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="icon-img"></image>
				</div>
				
				<div class="person-list" @tap="toBindCard">
					<div class="center">
						<span class="jiu-font28-aaa left">绑定银行卡</span>
						<span class="jiu-font28-ffc" style="color: #FF9E3E;">{{ user.myInfo.user.hasBindCard == 0 ? '未绑定' : '已绑定' }}</span>
						<!-- <input type="text" placeholder="修改密码" placeholder-class="jiu-font28-aaa" placeholder-style="font-weight: 300;" /> -->
					</div>
					<image src="../../../static/img/enter16.png" mode="aspectFill" class="icon-img"></image>
				</div>
				
				<div style="width: 100%;display: flex;justify-content: flex-end;">
					<span class="exitLogin-btn" @tap.stop="signOut">退出登录</span>
				</div>
				
				<div class="footer-box">
					<span class="jiu-font24-555" style="margin-bottom: 1.07vw;text-align: center;">版本号：V1.0.0</span>
					<span class="jiu-font24-555" style="text-align: center;">
						<label class="jiu-font32-ffc" @tap="yhxy">《服务协议》</label> | <label class="jiu-font32-ffc" @tap="yszc">《隐私政策》</label>		
					</span>
				</div>
			</div>
		</ma-refresh>
	</ma-body>
</template>

<script>
	export default{
		data(){
			return{
				phoneNumber: 0,
				headerImg: '',
				nickname: '',
				version: ''
			}
		},
		computed:{
		},
		methods:{
			toResetName(){
				this.$ma.route.resetName()
			},
			signOut(){
				uni.showModal({
					title: '提示',
					content: '确认要退出登录吗？',
					confirmText: '退出登录',
					cancelText: '再想想',
					success: function (res) {
							if (res.confirm) {
								uni.clearStorageSync('access_token');
								uni.reLaunch({
									url: '/pages/loginBefore/loginBefore'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
				})
			},
			toReset(){
				this.$ma.route.resetPassword({
					resetType: 'reset'
				})
			},
			toRealName(){
				if(this.user.myInfo.user.isReal == 1) return uni.showToast({
					icon: 'none',
					title: '您已完成实名认证！'
				})
				this.$ma.route.realName()
			},
			fuzhi(data){
				uni.setClipboardData({ 
					data: String(data), 
					success:res=>{
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					}
				})
			},
			onHeader(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original','compressed'],
					sourceType: ['album'],
					success: async res => {
						let headerUrl = res.tempFilePaths[0];
						let avatar = await this.$store.dispatch('global/upload' , headerUrl);
						let data = {
							avatar: avatar
						};
						let re = await this.$u.api.onEditInfo(data)
						this.$store.dispatch('user/loginSuccess');
						this.headerImg = avatar;
					}
				})
			},
			async editName(){
				let data = {
					nickname: this.nickname
				};
				let re = await this.$u.api.onEditInfo(data);
				this.$store.dispatch('user/loginSuccess');
			},
			yszc(){
				this.$ma.route.yszc()
			},
			yhxy(){
				this.$ma.route.agreement()
			},
			toBindCard(){
				if(this.user.myInfo.user.isReal == 0){
					uni.showToast({
						icon: 'none',
						title: '请先完成实名认证'
					})
					return;
				} 
				this.$ma.route.buyInput()
			}
		},
		onLoad() {
			let num = this.user.info.phone;
			this.phoneNumber = num.replace(num.substring(3,7),"****");
			console.log(this.user.myInfo)
			if (this.user.myInfo.user.avatar){
				this.headerImg = this.user.myInfo.user.avatar;
				this.nickname = this.user.myInfo.user.nickname;
			} else{
				this.headerImg = '/static/img/header.png';
				this.nickname = '九歌灵藏'
			} 
		},
		mounted() {
			// this.version = plus.runtime.version
		},
		onShow(){
			this.nickname = this.user.myInfo.user.nickname;
		}
	}
</script>

<style lang="scss">
	input{
		font-size: 3.73vw;
	}
	.jiu-font32-ffc{
		font-size: 3.2vw;
		font-weight: 300;
		color: #FFCE80;
	}
	.center{
		display: flex;
		align-items: center;
	}
	.left{
		display: flex;
		flex-shrink: 0;
		width: 19.5vw;
		margin-right: 4.27vw;
	}
	.icon-img{
		width: 4.27vw;
		height: 4.27vw;
	}
	.header-img{
		width: 12.8vw;
		height: 12.8vw;
		border-radius: 50%;
		// margin-left: 10px;
		display: block;
		
		// clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 49% 98%, 0 75%, 0 25%);
		// clip: rect(13px,0,16px 9px);
		// border-top-left-radius: 20px 50px;
		// border-top-right-radius: 20px 50px;
		// border-bottom-left-radius: 20px 50px;
		// border-bottom-right-radius: 20px 90px;
		// border-radius: 40px/20px;
	}
	.big-box{
		// height: 100vh;
		background-color: #000000;
		padding-top: 17.07vw;
		display: flex;
		flex-direction: column;
		position: relative;
		
		.title-box{
			display: flex;
			padding-left: 5.33vw;
			margin-bottom: 10.13vw;
			.title-line{
				display: block;
				width: 1.07vw;
				height: 17.07vw;
				border-radius: 12.08vw;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 3.2vw;
			}
			.input-text{
				display: flex;
				flex-direction: column;
			}
			
		}
	
		.person-list{
			margin-top: 2.67vw;
			margin-left: 5.33vw;
			background-color: #1B1B1B;
			border-radius: 13vw 0 0 13vw;
			padding: 6.4vw;
			padding-right: 5.4vw;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.exitLogin-btn{
			display: block;
			margin-top: 2.67vw;
			width: 28.8vw;
			line-height: 10.67vw;
			text-align: center;
			background-color: #A972FF;
			box-shadow: 0vw 1vw 2vw rgba(71,12,114,0.4800);
			border-radius: 5vw 0 0 5vw;
			font-weight: 500;
			font-size: 3.73vw;
		}
	}
	.bottomBox{
		background-color: #000000 !important;
	}
	.footer-box{
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: 6.93vw;
	}
</style>
